// 设置背景图
@mixin bg($url,$suffix:'png', $size: 100% 100%, $positon: center) {
  background-position: $positon;
  background-size: $size;
  background-repeat: no-repeat;
  background-image: url($url + "@2x."+$suffix);
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x."+$suffix);
  }
}
// 垂直水平居中
@mixin trans-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 清除浮动
@mixin clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
// $line:超出显示几行省略号
// $substract:预留区域百分比
@mixin text-hid($line: 1, $substract: 0) {
  overflow: hidden;
  @if $line==1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100% - $substract;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}
// 1px边框
$border-poses: top, right, bottom, left;
$color: red;
@mixin border-1px($color: $color, $poses: $border-poses) {
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    @each $pos in $poses {
      border-#{$pos}: 1px solid $color;
      #{$pos}: 0;
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px &::after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px &::after {
    // 像素比为2的时候，设置缩放为0.5
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .border-1px &::after {
    -webkit-transform: scaleY(0.333333);
    // 像素比为3的时候，设置缩放为0.33333
    transform: scaleY(0.333333);
  }
}
// 扩展点击区域
@mixin extend-click() {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}
// 充满父级div
@mixin full-box() {
  width: 100%;
  height: 100%;
}